Vue.JS且戰且飛(二十四)

2017 iT 邦幫忙鐵人賽

DAY 16

Modern Web

Vue.JS且戰且飛系列第 24 篇

2017鐵人賽 vue.js eagle 老鷹且戰且飛

老鷹(eagle)

2016-12-29 22:52:38

1751 瀏覽

分享至

示範Vue.js&JQuery新增修改刪除查詢(修改資料)

24-list.php

<html>
<head>
    <meta charset="UTF-8">
    <title>示範Vue.js&JQuery新增修改刪除查詢(修改資料)</title>
</head>
<body>
<div id="show">
    <table>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>email</th>
            <th>del</th>
            <th>edit</th>
        </tr>
        <tr v-if="list != null" v-for="item in list">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.email }}</td>
            <td><input v-on:click="delItem(item.id)" type="button" value="del"></td>
            <td><a :href="editView(item.id)">edit</a></td>
        </tr>
        <tr v-else>
            <td colspan="3">沒有資料</td>
        </tr>
    </table>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    // start app
    new Vue({
        el: '#show',
        data: {
            list: []
        },
        mounted: function () {
            $.get('get-list.php', function (query) {
                this.list = query;
            }.bind(this), 'json');
        },
        methods: {
            delItem: function (id) {
                $.get('del.php', {id: id}, function (result) {
                    if (result.success) {
                        alert('刪除成功');
                        this.list = result.query;
                    } else {
                        alert('刪除失敗');
                    }
                }.bind(this), 'json');
            },
            editView: function (id) {
                return '/vue/24-edit.php?id=' + id;
            }
        }
    })
</script>
</html>

24-edit.php

<html>
<head>
    <meta charset="UTF-8">
    <title>示範Vue.js&JQuery新增修改刪除查詢(編輯資料)</title>
</head>
<body>
<div id="show">
    <div>
        name: <input type="text" v-model="name">
    </div>
    <div>
        age: <input type="text" v-model="age">
    </div>
    <div>
        email: <input type="text" v-model="email">
    </div>
    <input v-on:click="submitFrom()" type="button" value="submit">
    <a :href="goToList()">go to list</a>
</div>
</body>
<script src="jquery-3.1.1.min.js"></script>
<script src="vue.js"></script>
<script>
    // start app
    new Vue({
        el: '#show',
        data: {
            name: '',
            age: '',
            email: '',
            id:<?=$_GET['id']?>
        },
        mounted: function () {
            $.get('get-data.php', {id: this.id}, function (query) {
                if (query !== false) {
                    this.name = query.name;
                    this.age = query.age;
                    this.email = query.email;
                }
            }.bind(this), 'json');
        },
        methods: {
            submitFrom: function () {
                var $this = this;
                if ($this.name == '' || $this.age == '' || $this.email == '') {
                    alert('請填寫完整');
                } else {
                    $.get('edit.php', {
                        name: $this.name,
                        age: $this.age,
                        email: $this.email,
                        id: $this.id
                    }, function (result) {
                        console.log(result);
                        if (result) {
                            alert('edit成功');
                        } else {
                            alert('edit失敗');
                        }
                    }, 'json')
                }
            },
            goToList: function () {
                return '/vue/24-list.php';
            }
        }
    })
</script>
</html>

get-data.php

<?php
//pdo請自寫
include 'config.php';
include 'pdoClass.php';

if (isset($_GET)) {
    $pdo = new pdoClass($config);
    echo json_encode($pdo->getData($_GET['id']));
} else {
    echo false;
}

edit.php

<?php
//pdo請自寫
include 'config.php';
include 'pdoClass.php';

if (isset($_GET)) {
    $pdo = new pdoClass($config);
    echo json_encode($pdo->editData($_GET));
} else {
    echo false;
}